body{height:100%;width:100%;margin:0;padding:0;background:#00aeef;font: "\5B8B\4F53","Microsoft Yahei",Arial, Helvetica,sans-serif;font-family: "Microsoft Yahei";}
ol, ul ,li{list-style: none;} 
img {border: 0; }
input{-webkit-appearance: none; -moz-appearance: none;-o-appearance: none; appearance: none;appearance: none; }
.float-l{float:left}
.float-r{float:right}
/*loading*/
.ld{
	position: absolute;
	top:50%;
	width:100%;
	margin-top: -51px;
	overflow: hidden;
}
.ld-bd{
	width:100%;
	position: relative;
}
.ld-bd .zx{
	position: absolute;
	left: 50%;
	margin-left: -40px;
}
.ld-bd .yf{
	width:100%;
	height:102px;
	position: relative;
}
.ld-bd .yf img{
	position: absolute;
}
.ld-bd .yf img:first-child{
	top:9px;
	left:50%;
	margin-left: 52px;
	opacity: 1;
	animation: yf1 1s infinite linear;
    -webkit-animation: yf1 1s infinite linear;
}
@keyframes yf1{
	0%{opacity: 1;top:3px}
	25%{opacity: 0.75;top:9px}
	50%{opacity: 0.5;top:3px}
	75%{opacity: 0.25;top:-3px}
	100%{opacity: 0;top:3px}
}
@-webkit-keyframes yf1{
	0%{opacity: 1;top:3px}
	25%{opacity: 0.75;top:9px}
	50%{opacity: 0.5;top:3px}
	75%{opacity: 0.25;top:-3px}
	100%{opacity: 0;top:3px}
}
.ld-bd .yf img:nth-child(2){
	top:-2px;
	left:50%;
	margin-left: 72px;
	opacity: 1;
	animation: yf2 1s infinite linear;
    -webkit-animation: yf2 1s infinite linear;
}
@keyframes yf2{
	0%{opacity: 0.75;top:-3px}
	25%{opacity: 0.5;top:3px}
	50%{opacity: 0.25;top:9px}
	75%{opacity: 0;top:3px}
	100%{opacity: 1;top:-3px}
}
@-webkit-keyframes yf2{
	0%{opacity: 0.75;top:-3px}
	25%{opacity: 0.5;top:3px}
	50%{opacity: 0.25;top:9px}
	75%{opacity: 0;top:3px}
	100%{opacity: 1;top:-3px}
}
.ld-bd .yf img:nth-child(3){
	top:8px;
	left:50%;
	margin-left: 86px;
	animation: yf3 1s infinite linear;
    -webkit-animation:yf3 1s  infinite linear;
}
@keyframes yf3{
	0%{opacity: 0.5;top:9px}
	25%{opacity: 0.25;top:3px}
	50%{opacity: 0;top:-3px}
	75%{opacity: 1;top:3px}
	100%{opacity: 0.75;top:9px}
}
@-webkit-keyframes yf3{
	0%{opacity: 0.5;top:9px}
	25%{opacity: 0.25;top:6px}
	50%{opacity: 0;top:-3px}
	75%{opacity: 1;top:3px}
	100%{opacity: 0.75;top:9px}
}
.ld-bd .yf img:nth-child(4){
	top:0px;
	left:50%;
	margin-left: 106px;
	animation: yf4 1s infinite linear;
    -webkit-animation:yf4 1s infinite linear;
}
@keyframes yf4{
	0%{opacity: 0.25;top:3px}
	25%{opacity: 0;top:-3px}
	50%{opacity: 1;top:3px}
	75%{opacity: 0.75;top:9px}
	100%{opacity: 0.5;top:3px}
}
@-webkit-keyframes yf4{
	0%{opacity: 0.25;top:3px}
	25%{opacity: 0;top:-3px}
	50%{opacity: 1;top:3px}
	75%{opacity: 0.75;top:9px}
	100%{opacity: 0.5;top:3px}
}
/*map*/
.mp{
	width:100%;
	height:100%;
	position: absolute;
	overflow: hidden;
	z-index: 9;
}
.mp-bd{
	width:100%;
	height:100%;
	position: relative;
	overflow: hidden;
	z-index: 9;
}
.mp-bd img{
	width:100%;
	position: absolute;
	bottom:0px;
}
.mp-car{
	width:100%;
	height:100%;
	position: relative;
	overflow: hidden;
	z-index: 99;
	left:0px;
	/*animation: xl 13700ms 1 linear 3800ms forwards;
	-webkit-animation: xl 13700ms 1 linear 3800ms forwards;	*/
}
/*@keyframes xl{
	0%{left:0px}
	14%{left:-2%}
	50%{left:-11.5%}
	92%{left:-24%}
	100%{left:-28%}
}
@-webkit-keyframes xl{
	0%{left:0px}
	14%{left:-2%}
	50%{left:-11.5%}
	92%{left:-24%}
	100%{left:-28%}
}*/
.mp-car img{
	width:11%;
	position: absolute;
	bottom:-20px;	
	/*animation: xcar 6000ms 1 linear 1800ms forwards;
	-webkit-animation: xcar 6000ms 1 linear 1800ms forwards;	*/
	left:43%;
	transform:rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.car1{
	animation: xcar1 1000ms 1 linear  forwards;
	-webkit-animation: xcar1 1000ms 1 linear  forwards;	
}
@-webkit-keyframes xcar1{
	from{
		transform:rotate(0);
		-webkit-transform: rotate(0deg);
		}
	to{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
	}
}
@keyframes xcar1{
	from{
		transform:rotate(0);
		-webkit-transform: rotate(0deg);
		}
	to{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
	}
}
.car2{
	animation: xcar2 1000ms 1 linear  forwards;
	-webkit-animation: xcar2 1000ms 1 linear  forwards;	
}
@-webkit-keyframes xcar2{
	from{
		transform:rotate(10deg);
		-webkit-transform: rotate(10deg);
		}
	to{
		transform:rotate(-5deg);
		-webkit-transform: rotate(-5deg);
	}
}
@keyframes xcar2{
	from{
		transform:rotate(10deg);
		-webkit-transform: rotate(10deg);
		}
	to{
		transform:rotate(-5deg);
		-webkit-transform: rotate(-5deg);
	}
}
.car3{
	animation: xcar3 500ms 1 linear  forwards;
	-webkit-animation: xcar3 500ms 1 linear  forwards;	
}
@-webkit-keyframes xcar3{
	from{
		transform:rotate(-5deg);
		-webkit-transform: rotate(-5deg);
		}
	to{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
	}
}
@keyframes xcar3{
	from{
		transform:rotate(-5deg);
		-webkit-transform: rotate(-5deg);
		}
	to{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
	}
}
.car4{
	animation: xcar4 500ms 1 linear  forwards;
	-webkit-animation: xcar4 500ms 1 linear  forwards;	
}
@-webkit-keyframes xcar4{
	from{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
		}
	to{
		transform:rotate(-7deg);
		-webkit-transform: rotate(-7deg);
	}
}
@keyframes xcar4{
	from{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
		}
	to{
		transform:rotate(-7deg);
		-webkit-transform: rotate(-7deg);
	}
}
.car5{
	animation: xcar5 800ms 1 linear  forwards;
	-webkit-animation: xcar5 800ms 1 linear  forwards;	
}
@-webkit-keyframes xcar5{
	from{
		transform:rotate(-7deg);
		-webkit-transform: rotate(-7deg);
		}
	to{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
	}
}
@keyframes xcar5{
	from{
		transform:rotate(-7deg);
		-webkit-transform: rotate(-7deg);
		}
	to{
		transform:rotate(3deg);
		-webkit-transform: rotate(3deg);
	}
}


/*@-webkit-keyframes xcar{
	0%{
		transform:rotate(0);
		-webkit-transform: rotate(0deg);
		}
	15%{
		transform:rotate(-1deg);
		-webkit-transform: rotate(-1deg);
	}
	25%{
		transform:rotate(-3deg);
		-webkit-transform: rotate(-3deg);
	}
	90%{
		transform:rotate(-4deg);
		-webkit-transform: rotate(-4deg);
	}
	100%{
		transform:rotate(-7deg);
		-webkit-transform: rotate(-7deg);
	}
}
@keyframes xcar{
	0%{
		transform:rotate(0);
		-webkit-transform: rotate(0deg);
		}
	15%{
		transform:rotate(-1deg);
		-webkit-transform: rotate(-1deg);
	}
	25%{
		transform:rotate(-3deg);
		-webkit-transform: rotate(-3deg);
	}
	90%{
		transform:rotate(-4deg);
		-webkit-transform: rotate(-4deg);
	}
	100%{
		transform:rotate(-7deg);
		-webkit-transform: rotate(-7deg);
	}
}*/
.mp-tt{
	width:100%;
	height:100%;
	position: absolute;
	overflow: scroll;	
}
/*@keyframes xp{
	from{top:-280%;}
	to{top:100%;}
}
@-webkit-keyframes xp{
	from{top:-280%;}
	to{top:100%;}
}*/
.mp-pic{
	width:100%;
	position: relative;
	z-index: 999;
	height:303.5%;
	top:-203.5%;
	/*animation: xp 5000ms 1 linear 3500ms forwards;
	-webkit-animation: xp 5000ms 1 linear 3500ms forwards;	*/
}
.mp-pic img{	
	width:40%;
	position: absolute;
}
.mp-pic img:nth-child(1){
	top:475%;
	width:20%;
	display: none;
	right:0%;
	animation: lc 7000ms 1 linear 500ms forwards;
	-webkit-animation: lc 7000ms 1 linear 500ms forwards;	
}
.mp-pic img:nth-child(4){
	top:46%;
	width:100%;
	display: none;
	right:0%;
}
@keyframes lc{
	0%{right:0%;top:47.5%}
	100%{right:-90%;top:51.3%}	
}
@-webkit-keyframes lc{
	0%{right:0%;top:47.5%}
	100%{right:90%;top:51.3%}
}
.mp-pic img:nth-child(3){
	top:60%;
	left:6%;
	display: none;
	animation: qq 10000ms 1 linear forwards;
	-webkit-animation: qq 10000ms 1 linear forwards;	
}
.mp-pic img:nth-child(2){
	top:70%;
	right:0%;
	display: none;
	width:30%;	
}
@keyframes qq{
	0%{top:60%;left:6%}
	100%{top:50%;left:50%}
}
@-webkit-keyframes qq{
	0%{top:60%;left:6%}
	100%{top:50%;left:50%}
}
.fly{
	left:-90%;
	
	/*animation: fly 2000ms 1 linear 7000ms forwards;
	-webkit-animation: fly 2000ms 1 linear 7000ms forwards;*/
}
/*@keyframes fly{
	from{left:-90%}
	to{left:70%}
}
@-webkit-keyframes fly{
	from{left:-90%}
	to{left:70%}
}*/
.hg{
	width:100%;
	position: absolute;
	z-index: 80;
	overflow: hidden;
	height:100%;	
}
.hg-bd{
	width:100%;
	position: relative;
    top:30%; 
    height:100%; 
}
.hg-bd img{
	width:30%;
    left:5%;
    display: none;
    position: absolute; 
    top:0%;    
}
.rock{
	width:100%;
	position: absolute;
	overflow: hidden;
	height:100%;
	z-index: 70;	
}
.rock-bd{
	width:100%;
	position: relative;
	/*animation: rock 2000ms 1 linear 9000ms forwards;
    -webkit-animation: rock 2000ms 1 linear 9000ms forwards;*/
    top:30%;    
}
/*@-webkit-keyframes rock{
	from{left:100%;top:60%}
	to{left:-30%;top:5%}
}
@keyframes rock{
	from{left:100%;top:60%}
	to{left:-30%;top:5%}
}*/
.rock-bd img{
	width:25%;
    right:5%;
    display: none;
    position: absolute;
}
/*ball*/
.bl{
	width:100%;
	height:100%;
	position: absolute;
	z-index: 99;
	overflow: hidden;
}
.bl-bd{
	width:100%;
	height:100%;
	position: relative;
	left: -100%;
	top:100%;  
}
.bl-bd img{
	width:380%;
	animation: blx 2000ms infinite linear 11000ms;
    -webkit-animation: blx 2000ms infinite linear 11000ms;
    position: absolute;
}
@-webkit-keyframes blx{
	0%{top:9px}
	25%{top:3px}
	50%{top:-3px}
	75%{top:3px}
	100%{top:9px}
}
@keyframes blx{
	0%{top:9px}
	25%{top:3px}
	50%{top:-3px}
	75%{top:3px}
	100%{top:9px}
}
/*meet*/
.mt{
	width:100%;
	height:100%;
	position: absolute;
	background: url(../../img/dating/bg1.jpg) no-repeat center center;
	background-size:100% 100%;
	z-index: 9;
	display: none;
	overflow: hidden;
}
.mt-car{
	width:100%;
	position: relative;
	overflow: hidden;
	top:57%;
	height:40%;
	display: none;
}
.mt-car .front-car{
	position: absolute;
	left: 25%;
	width:20%;
}
.mt-car .back-car{
	position: absolute;
	left: 75%;
	width:100%;
}
.mt-ft{
	width:100%;
	position: absolute;
	overflow: hidden;
	height:100%;
	z-index: 100;
}
.mt-ft-bd{
	position:relative;
	width:100%;
	height:100%;	
}
.mt-ft .mt-ft-bd img{
	position: absolute;
	width:60%;
	left:-60%;
	top:5%;
}
.mt-pqj{
	width:100%;
	position: relative;
	overflow: hidden;
	height:40%;
	top:0%;
}
.mt-pqj img{
	position: absolute;
	width:23%;
	left:27%;
	animation:pqj 2000ms infinite linear 1000ms;
    -webkit-animation:pqj 2000ms infinite linear 1000ms;
}
@-webkit-keyframes pqj{
	0%{left:27%}
	25%{left:26%}
	50%{left:25%}
	75%{left:26%}
	100%{left:27%}
}
@keyframes pqj{
	0%{left:27%}
	25%{left:26%}
	50%{left:25%}
	75%{left:26%}
	100%{left:27%}
}
.mt-cloud{
	width:100%;
	position: relative;
	overflow: hidden;
	height:40%;
	top:-75%;
}
.mt-cloud img{
	position: absolute;
	width:23%;
	left:70%;
	animation:cloud 3000ms infinite linear 1000ms;
    -webkit-animation:cloud 3000ms infinite linear 1000ms;
}
@-webkit-keyframes cloud{
	0%{left:76%}
	25%{left:74%}
	50%{left:72%}
	75%{left:74%}
	100%{left:76%}
}
@keyframes cloud{
	0%{left:76%}
	25%{left:74%}
	50%{left:72%}
	75%{left:74%}
	100%{left:76%}
}
.mt-jt{
	width:100%;
	position: relative;
	top:-44%;
	left: 50%;	
}
.mt-jt img{
 	width:15%;
 	position: absolute;
 	display: none;
 	animation: jt 1000ms infinite linear;
    -webkit-animation: jt 1000ms infinite linear;
}
@-webkit-keyframes jt{
	from{transform: scale(1.1,1.1);-webkit-transform: scale(1.2,1.2);}
	to{transform: scale(0.9,0.9);-webkit-transform: scale(0.9,0.9);}
}
/*表单*/
.biao{
	width:100%;
	position: absolute;
	z-index: 100;
	display: none;
}
.biao-bd{
	width:84%;
	color: #ffffff;
	margin-left: 8%;
	position: relative;
}
.biao-bd .pic{
	width:100%;
	position: absolute;
}
.biao-bd .pic img{
	width:100%;
}
.biao-bd p{
	text-align: center;
	margin-top: 0;
	margin-bottom: 0px;
}
.biao-bd .ppbd p:nth-child(1){
	font-size: 20px;
}
.biao-bd .ppbd p:nth-child(2){
	font-size: 18px;
}
.biao-bd .ppbd p:nth-child(3){
	font-size: 20px;
}
.biao-bd .ppbd p:nth-child(4){
	font-size: 18px;
}
.biao-bd .ppbd p:nth-child(n+5){
	font-size: 14px;
}
.biao-bd .bd{
	width:84%;
	margin: 7px 8%;
	position: relative;
}
.biao-bd .bd span{
	width:20%;
	display: inline-block;
}
.biao-bd .bd span img{
	width:100%;
}
.biao-bd .bd input[type='text']{
	outline: none;
	border: 1px solid #ffffff;
	padding-top: 1px;
	padding-bottom: 1px;
	text-indent: 1%;
	border-radius: 0;
	background: transparent;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:70%;	
}
/*.biao-bd .bd input[type='radio']{
	border-radius: 0;
	border: 1px solid #ffffff;
	margin-right: 5%;
	display: inline-block;
	vertical-align: top;
	padding-bottom: 18px;
	padding-right: 18px;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}*/
.pay_list_c1 {
width: 22px !important;
height: 21px;
padding-top: 3px;
cursor: pointer;
text-align: center;
vertical-align: middle;
background-image: url(../../img/dating/radio.png);
background-repeat: no-repeat;
background-position: -22px 0;
}
.radioclass{
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.on {
background-position: -1px 0;
}
select{
	width:47%;
	border:1px solid #ffffff;
	background: transparent;
	color: #ffffff;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	outline: none;
	text-transform: none;
	margin: 0;
	font: inherit;
	color: inherit;
	box-sizing: border-box;
}
.s-jt{
	position: absolute;
	right: 15.5%;
	width:0% !important;
}
.a-bd{
	color: #ffffff;
	padding: 10% 10%;
	text-align: center;
	width:28%;
	margin: 5% 10%;
	display: inline-block;
	outline:none;
    -moz-outline-style:none;
}
.a-bd:link{
	text-decoration: none;
}
.a-bd:visit{
	text-decoration: none;
}
.a-bd:hover{
	color: #ffffff;
}
.all-s{
	width:34%;
	margin: 5% 33% !important;
}
.ppbd{
	position: relative;z-index: 999;padding-top: 10%;
}
.ppwc{
	position: relative;z-index: 999;padding-top: 40%;
}
@media only screen and (min-width:320px ) {
	.p-r{
	    padding-right:33%
	}
	.biao-bd .bd input[type='text']{
		border-radius: 12px;
	}
	.s-jt{
		top:3%;
		font-size: 20px !important; 
	}
	.a-bd{
		margin: 0% 10%;
		padding: 0% 0;
		font-size: 12px;
	}
	.ppwc p{
	    font-size: 18px;
	    padding-bottom: 4px;
	}
	.seb{
	width:43% !important;
    }
    .biao-bd .bd span{
	font-size: 14px;
    }
    .biao-bd p{
	margin-top: 0;
	margin-bottom: 3px;
    }
    .biao-bd .bd{
	margin:8px 8%;
    }
    .biao-bd .ppbd p:nth-child(1){
	    font-size: 18px;
	}
	.biao-bd .ppbd p:nth-child(2){
		font-size: 18px;
	}
	.biao-bd .ppbd p:nth-child(3){
		font-size: 18px;
	}
	.biao-bd .ppbd p:nth-child(4){
		font-size: 18px;
	}
	.biao-bd .ppbd p:nth-child(n+5){
		font-size: 12px;
	}
	.biao-bd .bd input[type='text']{
		font-size: 12px;		
	}
	select{
		border-radius: 12px;
	}
}
@media only screen and (min-width:375px ) {
	.p-r{
	    padding-right:35%
	}
	.biao-bd .bd input[type='text']{
		border-radius: 12px;
	}
	.s-jt{
		top:7%;
		font-size: 22px !important; 
	}
	.a-bd{
		margin: 0% 10%;
		padding: 0% 0;
		font-size: 14px;
	}
	.ppwc p{
	    font-size: 22px;
	    padding-bottom: 4px;
	}
	.seb{
	width:43% !important;
    }
    .biao-bd .bd span{
	font-size: 18px;
    }
    .biao-bd p{
	margin-top: 0;
	margin-bottom: 5px;
    }
    .biao-bd .bd{
	margin: 12px 8%;
    }
    .biao-bd .ppbd p:nth-child(1){
	    font-size: 20px;
	}
	.biao-bd .ppbd p:nth-child(2){
		font-size: 20px;
	}
	.biao-bd .ppbd p:nth-child(3){
		font-size: 20px;
	}
	.biao-bd .ppbd p:nth-child(4){
		font-size: 20px;
	}
	.biao-bd .ppbd p:nth-child(n+5){
		font-size: 14px;
	}
	.biao-bd .bd input[type='text']{
		font-size: 14px;		
	}
	select{
		border-radius: 12px;
	}
}
@media only screen and (min-width:414px ) {
	.p-r{
	    padding-right:37%
	}
	select{
		border-radius: 12px;
	}
	.biao-bd .bd input[type='text']{
		border-radius: 15px;
	}
	.biao-bd .bd{
	margin: 13px 8%;
    }
	.s-jt{
		top:10%;
		font-size: 24px !important; 
	}
	.a-bd{
		margin: 0% 10%;
		padding: 0% 0;
		font-size: 16px;
	}
	.ppwc p{
	    font-size: 23px;
	    padding-bottom: 5px;
	}
	.seb{
	width:43% !important;
    }
    .biao-bd .bd span{
	font-size: 20px;
    }
    .biao-bd p{
	margin-top: 3px;
	margin-bottom: 5px;
    }
    .biao-bd .bd input[type='text']{
		font-size: 16px;		
	}
}
.ppwc p:nth-child(4){
	margin-top: 20px;
}
.share{
	width:100%;
	height:100%;
	position: absolute;
	background: rgba(0,0,0,.5);
	z-index: 999;
	display: none;
	
}
.share img{
	margin-left: 80%;
	width:20%;	
	animation: jt2 1000ms infinite linear;
    -webkit-animation: jt2 1000ms infinite linear;
}
@-webkit-keyframes jt2{
	from{transform: scale(1.1,1.1);-webkit-transform: scale(1.2,1.2);}
	to{transform: scale(0.9,0.9);-webkit-transform: scale(0.9,0.9);}
}
.share span{
	color: #ffffff;
	font-size: 24px;
	float: right;
	margin-top: 3%;
}
.jsq{
	width:90%;
	color: #ffffff;
	font-size: 1.2rem;
	margin: 0 5%;
	text-align:center;
}
 @-webkit-keyframes reverseRotataZ{
		        0%{-webkit-transform: rotateZ(0deg);}
		        100%{-webkit-transform: rotateZ(-360deg);}
		    }
		    @-webkit-keyframes rotataZ{
		        0%{-webkit-transform: rotateZ(0deg);}
		        100%{-webkit-transform: rotateZ(360deg);}
		    }
		    #musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
		    #musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background: url(../../img/dating/mcbg.png) no-repeat;background-size:100%;}
		    #musicControl a audio{width:100%;height:56px;}
		    #musicControl a.stop { background-position:left bottom;}
		    #musicControl a.onx { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
		    #music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}